<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">标题</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x>
          <div class="scroller-box">
            <group label-width="1.9rem" title="弹框提示">
              <x-button type="primary" @click.native="show('tips')">弹框提示</x-button>
              <x-button type="primary" @click.native="show('choose')">弹框 警告</x-button>
              <x-button type="primary" @click.native="show('choosea')">弹框 成功</x-button>
              <x-button type="primary" @click.native="show('chooseb')">弹框 错误</x-button>
              <div style="margin-top:20px; padding:0 0.2rem;">
                <zx-button type="tab" :data="['选项一', '选项二', '选项三']" @on-click="click"></zx-button>
              </div>
              <div style="margin-top:20px; padding:0 0.2rem;">
                <x-button type="primary" @click.native="show('timeShow')">时间选择</x-button>
              </div>
              <div style="margin-top:20px; padding:0 0.2rem;">
                <x-input title="title" v-model="moneyValue"></x-input>
                <x-button type="primary" @click.native="formatMoney">格式化时间</x-button>
                <x-button type="primary" @click.native="backFormatMoney">去掉格式化</x-button>
              </div>
            </group>
          </div>
        </scroller>
      </div>
    </div>
    <zx-timeRang v-model="timeShow" :timeDate="timeDate" @on-click="setDateVal"></zx-timeRang>
    <zx-dialog v-model="chooseShow" type="warn" butType="button" :data="['确认']" tipsmsg="免费翻译服务可提供简体中文和另外 100 多种语言之间的互译功能" @on-click-yes="clickYes"></zx-dialog>
    <zx-dialog v-model="chooseShowa" type="success" butType="button" :data="['确认']" tipsmsg="成功提示 100 多种语言之间的互译功能" @on-click-yes="clickYes"></zx-dialog>
    <zx-dialog v-model="chooseShowb" type="error" butType="button" :data="['确认']" tipsmsg="错误提示错误提示 100 多种语言之间的互译功能" @on-click-yes="clickYes"></zx-dialog>
    <zx-dialog v-model="tipsShow" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="clickNo" @on-click-yes="clickYes">
      <div slot="body" class="tips">
        本产品为非保本浮动收益型理财产品，我行并不承诺您得本今安全和收益保障，您得本金将可能受到市场变动等因素的影响而蒙受损失。我行代
      </div>
    </zx-dialog>
  </div>
</template>

<script>
export default {
  mounted () {
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    show (val) {
      if (val === 'tips') {
        this.tipsShow = true
      }
      if (val === 'choose') {
        this.chooseShow = true
      }
      if (val === 'choosea') {
        this.chooseShowa = true
      }
      if (val === 'chooseb') {
        this.chooseShowb = true
      }
      if (val === 'but') {
        this.butShow = true
      }
      if (val === 'timeShow') {
        this.timeShow = true
      }
    },
    click (val) {
      console.log(val)
    },
    clickNo (val) {
      console.log(val)
    },
    clickYes (val) {
      console.log(val)
    },
    setDateVal (val) {
      this.timeDate = val
      console.log(this.timeDate)
    },
    formatMoney () {
      let lRes = this.$publicFun.number_format(parseFloat(this.moneyValue), 2, '.', ',')
      console.log(lRes)
      this.moneyValue = lRes
    },
    backFormatMoney () {
      let lRes = this.$publicFun.replaceChar(this.moneyValue, ',')
      console.log(lRes)
    }
  },
  data () {
    return {
      tipsShow: false,
      chooseShow: false,
      chooseShowa: false,
      chooseShowb: false,
      timeShow: false,
      timeDate: ['2018-04-05'],
      moneyValue: ''
    }
  },
  watch: { }
}
</script>
<style>
</style>
